<template>
  <div class="main-layout">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <router-link class="navbar-brand" to="/">
          <span class="brand-text">命理定义</span>
        </router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <!-- 这里可以添加其他主菜单项 -->
          </ul>
          <ul class="navbar-nav">
            <li class="nav-item" v-if="!isLoggedIn">
              <router-link class="nav-link" to="/login">登录</router-link>
            </li>
            <li class="nav-item" v-if="!isLoggedIn">
              <router-link class="nav-link" to="/register">注册</router-link>
            </li>
            <li class="nav-item dropdown" v-if="isLoggedIn" ref="dropdownMenu">
              <a class="nav-link dropdown-toggle" href="#" @click.prevent="toggleDropdown" role="button" aria-expanded="false">
                {{ username }}
              </a>
              <ul class="dropdown-menu dropdown-menu-end" :class="{ 'show': isDropdownOpen }">
                <li><router-link class="dropdown-item" to="/profile" @click="closeDropdown">个人中心</router-link></li>
                <li><router-link class="dropdown-item" to="/recharge" @click="closeDropdown">积分充值</router-link></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#" @click.prevent="handleLogout">退出登录</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <main class="main-content">
      <router-view></router-view>
    </main>
    <footer class="footer mt-auto py-3 bg-light">
      <div class="container text-center">
        <span class="text-muted">© 2025 命理定义. All rights reserved.</span>
      </div>
    </footer>
  </div>
</template>

<script>
import { useUserStore } from '../store/userStore'
import { mapState } from 'pinia'

export default {
  name: 'MainLayout',
  data() {
    return {
      isDropdownOpen: false
    }
  },
  computed: {
    ...mapState(useUserStore, ['isAuthenticated', 'username']),
    isLoggedIn() {
      return this.isAuthenticated;
    }
  },
  created() {
    // 初始化用户状态
    const userStore = useUserStore()
    if (userStore.isAuthenticated) {
      userStore.getUserScore()
    }
  },
  mounted() {
    // 添加全局点击事件监听器，点击页面其他区域时关闭下拉菜单
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听器
    document.removeEventListener('click', this.handleOutsideClick);
  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen;
    },
    closeDropdown() {
      this.isDropdownOpen = false;
    },
    handleOutsideClick(event) {
      // 如果下拉菜单是打开状态，且点击的不是下拉菜单区域，则关闭菜单
      if (this.isDropdownOpen && this.$refs.dropdownMenu && !this.$refs.dropdownMenu.contains(event.target)) {
        this.isDropdownOpen = false;
      }
    },
    handleLogout() {
      this.closeDropdown();
      const userStore = useUserStore()
      userStore.logout()
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.main-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

.brand-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.navbar-brand {
  text-decoration: none;
}

.nav-link {
  color: #2c3e50;
}

.nav-link:hover {
  color: #42b983;
}

.footer {
  margin-top: auto;
}

/* 确保下拉菜单显示在其他元素之上 */
.dropdown-menu.show {
  display: block;
  z-index: 1000;
}

/* 格言样式 */
.wisdom-text {
  font-size: 0.9rem;
  color: #6c757d;
  font-style: italic;
  margin-bottom: 0.5rem;
}
</style> 